<!--
 * @Author: your name
 * @Date: 2021-08-19 14:12:58
 * @LastEditTime: 2021-08-30 19:01:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \宏烨找房\client-applet\src\views\lease\index.vue
-->
<!--  -->
<template>
  <div class="lease">
    <div class="leaseheader">
      <span class="am-navbar-left" @click="golease"
        ><i class="el-icon-arrow-left"></i
      ></span>
      <span class="am-navbar-title">发布房源</span>
      <span class="am-navbar-right"></span>
    </div>
    <div class="leasemain">
      <div class="am-list">
        <div class="am-list-header">房源信息</div>
        <div class="am-list-body">
          <div class="am-list-item">
            <router-link to="/search" class="link">
              <div class="am-list-content">小区名称</div>
              <div class="am-list-extra">
                请输入小区名称&nbsp;<van-icon name="arrow" />
              </div>
            </router-link>
          </div>
          <div class="am-list-item">
            <div class="am">
              <div class="am-list-content">
                租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金
              </div>
              <input type="text" placeholder="请输入租金/月" />
              <div class="am-input-extra">￥/月</div>
            </div>
          </div>
          <div class="am-list-item">
            <div class="am">
              <div class="am-list-content">
                建筑面积
              </div>
              <input type="text" placeholder="请输入建筑面积" />
              <div class="am-input-extra">㎡</div>
            </div>
          </div>
          <div class="am-list-item">
            <div class="xing" @click="showPicker = true">
              <div class="am-list-content">
                户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型
              </div>
              <div class="am-list-extra">
                <input
                  type="text"
                  placeholder="请选择"
                  class="xuanze"
                  :value="value1"
                />
                <van-icon name="arrow" />
              </div>
            </div>
          </div>
          <div class="am-list-item">
            <div class="xing" @click="showPickere = true">
              <div class="am-list-content">
                所在楼层
              </div>
              <div class="am-list-extra">
                <input
                  type="text"
                  placeholder="请选择"
                  class="xuanze"
                  :value="value2"
                /><van-icon name="arrow" />
              </div>
            </div>
          </div>
          <div class="am-list-item">
            <div class="xing" @click="showPickerer = true">
              <div class="am-list-content">
                朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向
              </div>
              <div class="am-list-extra">
                <input
                  type="text"
                  placeholder="请选择"
                  class="xuanze"
                  :value="value3"
                /><van-icon name="arrow" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="am-list">
        <div class="am-header">房屋标题</div>
        <div class="am-list-body">
          <input
            type="text"
            placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          />
        </div>
      </div>
      <div class="am-list">
        <div class="am-header">房屋图像</div>
        <div class="am-list-body">
          <van-uploader v-model="fileList" multiple />
        </div>
      </div>
      <div class="am-list">
        <div class="am-header">房屋配置</div>
        <div class="am-list-body">
          <ul class="HousePackage_root__1MUw0">
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-guihao"></use>
              </svg>
              <span>衣柜</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiyiji"></use>
              </svg>
              <span>洗衣机</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kongdiao"></use>
              </svg>
              <span>空调</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tianranqi"></use>
              </svg>
              <span>天然气</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bingxiang"></use>
              </svg>
              <span>冰箱</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-nuanqi"></use>
              </svg>
              <span>暖气</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianshi"></use>
              </svg>
              <span>电视</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-linyu-"></use>
              </svg>
              <span>热水器</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kuandai"></use>
              </svg>
              <span>宽带</span>
            </li>
            <li class="HousePackage_item__2q4AQ">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shafa"></use>
              </svg>
              <span>沙发</span>
            </li>
          </ul>
          <!-- <div class="hous">
            <ul
              class="HousePackage_root__1MUw0"
              v-for="(item, index) in list"
              :key="(item, index)"
            >
              <li class="HousePackage_item__2q4AQ">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-guihao"></use>
                </svg>
                <span>{{ item.label }}</span>
              </li>
            </ul>
          </div> -->
        </div>
      </div>
      <div class="am-list Add_desc__1Gqte">
        <div class="am-header">
          房屋描述
        </div>
        <div class="am-list-body">
          <textarea rows="5" placeholder="请输入房屋描述信息"></textarea>
        </div>
      </div>
    </div>
    <div class="leasefooter">
      <button class="quxiao" @click="centerDialogVisible = true">取消</button>
      <button class="tijiao">提交</button>
    </div>
    <!-- 户型 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 楼层 -->
    <van-popup v-model="showPickere" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsr"
        @cancel="showPickere = false"
        @confirm="onConfirme"
      />
    </van-popup>
    <!-- 朝向 -->
    <van-popup v-model="showPickerer" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsre"
        @cancel="showPickerer = false"
        @confirm="onConfirmer"
      />
    </van-popup>
    <!-- 提示放弃发布房源 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <span>放弃发布房源?</span>
      <div slot="footer" class="dialog-footer">
        <el-button class="fangqi" @click="golease">放弃</el-button>
        <el-button class="jixu" @click="centerDialogVisible = false"
          >继续编辑</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      value1: "",
      value2: "",
      value3: "",
      fileList: [],
      list: [],
      showPicker: false,
      showPickere: false,
      showPickerer: false,
      centerDialogVisible: false,
      columns: ["一室", "二室", "三室", "四室", "四室+"],
      columnsr: ["高楼层", "中楼层", "低楼层"],
      columnsre: ["东", "西", "南", "北", "东南", "东北", "西南", "西北"],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    golease() {
      this.$router.go(-1);
    },
    onConfirm(value1) {
      this.value1 = value1;
      this.showPicker = false;
    },
    onConfirme(value2) {
      this.value2 = value2;
      this.showPickere = false;
    },
    onConfirmer(value3) {
      this.value3 = value3;
      this.showPickerer = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    axios.get("http://47.102.145.189:8009/houses/params").then((res) => {
      console.log(res.data.body);
      this.list = res.data.body.supporting;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.lease {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f6f5f6;
  .leaseheader {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .am-navbar-left {
      padding-left: 15px;
      font-size: 18px;
    }
    .am-navbar-title {
      font-size: 16px;
    }
  }
  .leasemain {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    .am-header {
      background-color: #fff;
      font-size: 15px;
      padding: 10px 10px 9px;
      width: 100%;
      color: #333;
    }
    .am-list-header {
      background-color: #fff;
      font-size: 15px;
      padding: 10px 10px 9px;
      width: 100%;
      color: #21b97a;
    }
    .am-list-body {
      width: 100%;
      position: relative;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
      .am-list-item {
        display: flex;
        padding-left: 15px;
        height: 44px;
        background-color: #fff;
        overflow: hidden;
        align-items: center;
        border-top: 1px solid #ddd;
        .link {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-right: 10px;
          .am-list-extra {
            color: #888;
            font-size: 14px;
            text-align: right;
          }
          .van-icon-arrow {
            color: #888;
            font-size: 16px;
          }
        }
        .am-list-content {
          color: #666;
          font-size: 14px;
        }
        .am {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          input {
            border: none;
            flex: 1;
            font-size: 13px;
            margin: 0 20px;
          }
          .am-input-extra {
            overflow: hidden;
            padding-right: 10px;
            color: #888;
            font-size: 14px;
          }
        }
        .xing {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-right: 10px;

          .am-list-extra {
            color: #888;
            font-size: 14px;
            text-align: right;
            .xuanze {
              width: 50px;
              height: 100%;
            }
          }
          .van-icon-arrow {
            color: #888;
            font-size: 16px;
          }
        }
      }
      input {
        height: 44px;
        margin-left: 15px;
        font-size: 14px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        padding: 2px 0;
        border: 0;
        background-color: transparent;
        line-height: 1;
        box-sizing: border-box;
      }
      .van-uploader {
        padding: 0 10px;
      }

      .HousePackage_root__1MUw0 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        background: #fff;
        .HousePackage_item__2q4AQ {
          margin: 10px 0;
          width: 20%;
          line-height: 23px;
          span {
            display: block;
          }
        }
      }
    }
    .Add_desc__1Gqte {
      background-color: #fff;
      margin-top: 20px;
      margin-bottom: 20px;
      textarea {
        width: 95%;
        padding: 0;
        border: 0;
        margin: 10px;
        font-size: 14px;
        border-top: 1px solid #eee;
        height: 125px;
      }
    }
  }
  .leasefooter {
    width: 100%;
    height: 45px;
    button {
      width: 50%;
      height: 100%;
      border: none;
    }
    .quxiao {
      background: #fff;
      color: #21b97a;
    }
    .tijiao {
      background: #21b97a;
      color: #fff;
    }
  }
  .van-picker {
    width: 100%;
    height: 300px;
  }

  .dialog-footer {
    .jixu {
      color: #108ee9;
    }
  }
}
</style>
